<template>
    <div>
        <div style="margin-bottom: 10px">
            <i-button @click="btn_refresh" type="primary" style="margin-right: 10px">刷新</i-button> 
            <i-button type="primary" style="margin-right: 10px" @click="create_pv">创建PV</i-button>
            <i-button type="error" @click="multi_del_pv">批量删除</i-button>
        </div>
        <i-table border stripe ref="pv_table"  @on-selection-change="onSelect" :columns="format" :data="show_list" height="720">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="error" size="default"  @click="del_pv(index)">删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 创建PV模态框 -->
        <Modal v-model="show_create_pv_modal" width="600">
            <p slot="header" style="color:#f60;text-align:center">
                <span>创建PV</span>
            </p>
            <div style="width:90%">
                <Form :ref="pv" :model="pv" :rules="rules" label-position="left"  :label-width="100">
                    <Form-Item label="名字:"  prop="name">
                        <Input type="text"  v-model="pv.name" />
                    </Form-Item>
                    <Form-Item label="大小(G):"  prop="capacity">
                        <Input type="number"  v-model="pv.capacity" />
                    </Form-Item>
                    <Form-Item label="访问模式:" prop="accessModes">
                        <Select v-model="pv.accessModes">
                            <Option v-for="ac in access_mode_list" :key="ac" :value="ac">{{ ac }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="回收策略:" prop="reclaimPolicy">
                        <Select v-model="pv.reclaimPolicy">
                            <Option v-for="rp in reclaim_policy_list" :key="rp" :value="rp">{{ rp }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="源:" prop="source">
                        <Select v-model="pv.source">
                            <Option v-for="source in source_list" :key="source" :value="source">{{ source }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="nfs共享文件夹路径:"  prop="nfs_path">
                        <Input type="text"  v-model="pv.nfs.path" />
                    </Form-Item>
                    <Form-Item label="nfs服务器地址:"  prop="nfs_server">
                        <Input type="text"  v-model="pv.nfs.server" />
                    </Form-Item>
                    <Form-Item label="只读:" prop="readonly">
                        <Select v-model="pv.nfs.readonly">
                            <Option value="false">false</Option>
                            <Option  value="true">true</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="存储类名:"  prop="storage_class_name">
                        <Input type="text"  v-model="pv.storage_class_name" />
                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="btn_create_pv">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import {k8s_cluster_post} from '@/api/http'
import { delete_multi_pv, delete_pv,get_pv_list,create_pv} from  '@/api'
import { get_placement } from '@/common/util'


export default {
    data() {
        return {
            format: [
                {
                    type: 'selection',
                    align: 'center',
                    width:60,
                },
                {
                    title: '名字',key: 'name'
                },
                {
                    title: 'pvc',key: 'pvc',
                    render: (h,params) => {
                        let value = params.row.pvc
                        return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':'right',content:value}},[
                            h('a', '显示')
                        ]);
                    }
                },
                {
                    title: '状态', key: 'status'
                },
                {
                    title: '容量',key: 'capacity',
                },
                {
                    title: '访问模式',key: 'access_modes',
                },
                {
                    title: '回收策略',key: 'pv_reclaim_policy',
                },
                {
                    title: 'volume模式',key: 'volume_mode',
                },
                {
                    title: '存储类名',key: 'storage_class_name',
                    render: (h,params) =>{
                        let value = params.row.storage_class_name
                        if(!value){
                            return h('p','无')
                        }else{
                            return h('p',value)
                        }
                    }
                },
                {
                    title: '源',key: 'source',
                    render : (h,params) => {
                        let source = params.row.source 
                        if (source == null ){
                            return   h('p','无')
                        }else{
                            let value = JSON.stringify(source,undefined,4)
                            let placement = get_placement(params)
                            return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':placement,content:value}},[
                                    h('a', '显示')
                            ]);

                        }
                    }
                },
                {
                    title: '创建时间',key: 'create_time',
                },
                {
                    title: '操作',slot: 'action',align: 'center',width:150,
                }

            ],

            selecteds: [],
            // 创建pv
            show_create_pv_modal: false,
            access_mode_list:['ReadWriteMany','ReadWriteOnce'],
            reclaim_policy_list:['Retain','Delete'],
            source_list: ['nfs'],
            pv: {
                name: 'pv-rwx-nfs',
                capacity: 1,
                accessModes: 'ReadWriteMany',
                reclaimPolicy: 'Retain',
                source: 'nfs',
                nfs: {
                    path: '/NAS',
                    server: '192.168.11.31',
                    readonly: 'false',
                },
                storage_class_name:'',
            },
            rules:{
                name: [
                    { required: true, message: '请选择PV名称', trigger: 'blur' }
                ],
                capacity: [
                    { required: true, message: '请输入PV容量大小.', trigger: 'blur' },
                ],
            },
            // 分页
            total_list: [],
            show_list: [],
            total: 0,
            pageSize: 10,
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        // 选项改变就会触发
        onSelect(selection){
            this.selecteds = selection;
            console.log(this.selecteds)
        },
        check(){
            if(this.selecteds.length == 0 ){
                this.$Message.error("请选择一项")
                return false
            }  
            return true
        },
        multi_del_pv() {
            if(!this.check()) return
            let data = []
            for(let i=0;i<this.selecteds.length;i++){
                data[i] = this.selecteds[i].name
            }
            // console.log(data)
            let result = confirm("确定要删除"+data+"吗?")
            if(result == false) return 
            data = {"pv_list":data}
            k8s_cluster_post(delete_multi_pv,data).then( (response) => {
                console.log(response.data)
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('批量删除pv成功')
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },
        
        del_pv(index) {
            let name = this.show_list[index].name
            let result = confirm("确定要删除"+name+"吗?")
            if(result == false) return 
            let data= {"name":name}
            k8s_cluster_post(delete_pv,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除pv成功')
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },

        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        // 创建pv事件
        create_pv(){
            this.show_create_pv_modal=true;
        },
        getRandomNum(){
            let temp= Math.floor(Math.random()*10000);
            temp=String(temp);
            if(temp.length!=4){
                let templen=4-temp.length;
                for(let i=0;i<templen;i++){
                    temp+="0";
                }	
            }
            return parseInt(temp);
        },
        btn_create_pv(){
            let name_postfix = this.getRandomNum()
            
            let pv_name = this.pv.name + "-"+name_postfix
            // console.log(name_postfix,pv_name)
            let capacity = this.pv.capacity
            if (capacity < 0 || capacity > 100){
                alert("大小在1-100之内")
                return
            }
            capacity += "Gi"
            let accessModes = this.pv.accessModes
            let reclaimPolicy = this.pv.reclaimPolicy
            let source = this.pv.source
            let nfs_path = this.pv.nfs.path
            let nfs_server =this.pv.nfs.server
            let readonly = this.pv.nfs.readonly
            let storage_class_name = this.pv.storage_class_name
            let  pv = {}
            if (source == "nfs"){
                pv = {
                    "capacity":capacity,
                    "accessModes":accessModes,
                    "reclaimPolicy":reclaimPolicy,
                    "nfs": {
                        "path": nfs_path,
                        "server": nfs_server,
                        "readonly":readonly,
                    },
                    "storage_class_name": storage_class_name,
                }
                console.log(pv)
            }
            let data=  {"name":pv_name,"pv":pv}
            k8s_cluster_post(create_pv,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('创建PV成功')
                    this.show_create_pv_modal = false
                    this.refresh()
                }else {
                    alert(info)
                }
            })

        },
        refresh() {
            this.selecteds = []
            k8s_cluster_post(get_pv_list).then( (response) => {
                console.log(this.$refs)
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        },
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
pre{
    white-space: pre-wrap!important;
    word-wrap: break-word!important;
    *white-space:normal!important;
}

</style>